<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:ez="http://java.sun.com/jsf/composite/demo"
	xmlns:p="http://primefaces.org/ui">

<ui:composition template="/templates/common.xhtml">

	<ui:define name="pageHeader">Grupos</ui:define>

	<ui:define name="mainSection">
		
		<div class="twelve columns">
			<h:form>
				<!-- MY GROUPS -->
				<p:panel>
					<p:commandButton value="Excluir" action="#{groupMB.delete()}"
						update="groupList" />
					<p:dataTable value="#{groupMB.findAll()}" var="group"
						id="groupList" selection="#{groupMB.selectedGroups}"
						rowKey="#{group.id}">

						<p:column selectionMode="multiple" style="width:2%" />

						<p:column headerText="Nome do Grupo">
							<h:outputText value="#{group.name}" />
						</p:column>
						
						<p:column headerText="Amigos">
							<p:dataList value="#{group.members}" var="member">  
								<h:outputText value="#{member.fullName}" />
							</p:dataList>
						</p:column>
	
					</p:dataTable>

				</p:panel>

				<!-- NEW GROUP -->
				<h2>Novo Grupo</h2>

				<p:panel>


					<p:outputLabel value="Nome do Grupo" for="groupName" />
					<p:inputText id="groupName" value="#{groupMB.entity.name}" />

					<p:dataTable value="#{groupMB.listSysUser}" var="user"
						selection="#{groupMB.selectedUsers}" rowKey="#{user.id}">

						<p:column selectionMode="multiple" style="width:2%" />

						<p:column headerText="Usuarios">
							<h:outputText value="#{user.fullName}" />
						</p:column>

						<div style="clear: both" />
					</p:dataTable>
					<p:commandButton value="Salvar" action="#{groupMB.save()}"  update="groupList"/>

				</p:panel>
			</h:form>
		</div>
	</ui:define>

</ui:composition>
</html>